<template>
  <div class="car">
    <teleport to=".app-header">
      <van-nav-bar
        class="navBar detail-navBar"
        title="购物车"
        left-arrow
        @click-left="back"
      >
        <template #right>
          <van-icon name="ellipsis" />
        </template>
      </van-nav-bar>
    </teleport>
    <!-- 已经登录 -->
    <template v-if="getLoginStatus()">
      <van-swipe-cell class="goods-item" v-for="(item, index) in list" :key="index">
        <div class="goods-content">
          <van-checkbox
            @change="changeOneHandler(item)"
            v-model="item.flag"
            checked-color="#ee0a24"
          ></van-checkbox>
          <van-card
            :price="((item.originprice * item.discount) / 10).toFixed(2)"
            :desc="item.desc"
            :title="item.proname"
            class="goods-card"
            :thumb="item.img1"
          >
            <template #tags>
              <van-tag plain type="primary">标签</van-tag>
            </template>
            <template #num>
              <van-stepper v-model="item.num" min="1" button-size="22" disable-input />
            </template>
            <template #footer>
              <van-button
                square
                text="移入关注"
                type="default"
                hairline
                class="footer-button"
              />
              <van-button
                square
                text="删除"
                type="default"
                hairline
                class="footer-button"
              />
            </template>
          </van-card>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </template>
    <template v-else>
      <van-empty
        image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
        description="登录后可同步购物车中商品"
        @click="toLogin()"
      />
    </template>
    <van-submit-bar
      class="totalBar"
      :price="3050"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkAll" checked-color="#ee0a24">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance, onMounted } from "vue";
import { getCartListAPI } from "@/api/cart.js";
import { showFailToast } from "vant";

let { getLoginUserId } = getCurrentInstance().appContext.config.globalProperties;

let list = ref([]);

let getCartList = async () => {
  let userid = getLoginUserId();
  try {
    var res = await getCartListAPI({ userid });
    console.log("购物车列表请求成功", res);
    if (res) {
      list.value = res.data;
    }
  } catch (err) {
    showFailToast(err.message);
  }
};

let checkAll = computed({
  get() {
    var flag = list.value.every((v) => v.flag);
    console.log("flag", flag);
    return list.value.length > 0 ? flag : false;
  },
  set(val) {
    list.value.forEach((v) => {
      v.flag = val;
    });
  },
});

let changeOneHandler = (catItem) => {
  console.log("单选被点击", catItem);
};

onMounted(() => {
  getCartList();
});
</script>

<style lang="scss" scoped>
.goods-card {
  margin: 0;
}

::v-deep .goods-item {
  background-color: #f6f6f6;
  margin-top: 0.1rem;
  .goods-content {
    display: flex;
    .van-checkbox {
      padding: 0 0.2rem;
    }
    .van-card {
      flex: 1;
    }
  }
}
.footer-button {
  height: 0.4rem;
}
.delete-button {
  height: 100%;
}
.totalBar {
  bottom: 1rem;
}
</style>
